init();

function init() {
    initTodoList;
}

var initTodoList = (function () {
    var inputWrap = document.getElementsByClassName('input-wrap')[0],
        iconJia = document.getElementsByClassName('icon-jia')[0],
        addListItemBtn = document.getElementsByClassName('j-add-btn')[0],
        list = document.getElementsByClassName('list')[0],
        textInput = document.getElementById('text-input'),
        inputShow = false,  //搜索框状态
        isEdit = false,  //编辑状态
        parent = null;

    // 点击加号，弹出/隐藏输入框
    addEvents(iconJia, 'click', function () {
        if (inputShow) {
            showInput('close');
        } else {
            showInput('open');
        }
    });


    // 点击增加项目按钮，增加li
    addEvents(addListItemBtn, 'click', function () {
        var val = textInput.value,
            len = val.length,
            olistItems = list.getElementsByClassName('list-item'),
            oitem, oitemContext;

        if (!len) {
            //判断输入框是否为空
            alert('请输入内容');
            return;
        }

        for (var i = 0; i < olistItems.length; i++) {
            oitem = olistItems[i];
            oitemContext = elemChildren(oitem)[0].innerHTML;
            console.log(oitemContext);

            if (val === oitemContext) {
                // 判断输入的内容是否与已有项目重复
                alert('输入的内容已存在');
                inputWrap.style.display = 'none';
                inputShow = false;
                textInput.value = '';
                return;
            }
        }


        if (isEdit) {
            elemChildren(parent)[0].innerHTML = val;
            textInput.value = '';
            showInput('close');
            isEdit = false;
            parent.className = 'list-item';   //将li的编辑状态激活类清空
            addListItemBtn.innerHTML = '增加项目';
        } else {
            var listItem = document.createElement('li');
            listItem.className = 'list-item';
            listItem.innerHTML = itemTpl(val);  //完善li的内部元素
            list.appendChild(listItem);
            textInput.value = '';
            showInput('close');
        }
    });

    // 点击删除或修改按钮，对li进行删除或者修改--使用了事件委托机制
    addEvents(list, 'click', function (e) {
        var e = e || window.event;  //e 事件对象
        var tar = e.target || e.srcElement; //tar 事件源
        var oclassName = tar.className;
        parent = elemParent(tar, 2);

        if (oclassName === 'delete') {
            // 点击删除按钮
            // list.removeChild(parent);
            parent.remove();
            textInput.value = '';
            addListItemBtn.innerHTML = '增加项目';
            showInput('close');
        } else if (oclassName === 'edit') {
            // 点击编辑按钮
            var inputContext = elemChildren(parent)[0].innerHTML,
                oitems = document.getElementsByClassName('list-item'),
                oitem;

            for (var i = 0; i < oitems.length; i++) {
                oitem = oitems[i];
                oitem.className = 'list-item';
            }

            parent.className += ' active';
            showInput('open');
            textInput.value = inputContext;
            isEdit = true;
            addListItemBtn.innerHTML = '修改';
        }
    });


    function showInput(action) {
        if (action === 'close') {
            inputWrap.style.display = 'none';
            inputShow = false;
        } else if (action === 'open') {
            inputWrap.style.display = 'block';
            inputShow = true;
        }
    }

    // li元素节点内部的子元素，采用字符串拼接
    function itemTpl(text) {
        return ('<p class="item-context">' + text + '</p>' +
            '<div class="btn-wrap">' +
            '<button class="delete">删除</button>' +
            '<button class="edit">编辑</button>' +
            '</div > '
        );
    }

})();
